import React, { useState } from "react";
import styles from "./topwg.module.css";

import menuJthSvg from "/public/assets/WeGao/svg/menu_jth.svg";
import menuJthLightSvg from "/public/assets/WeGao/svg/menu_jth_light.svg";


interface MenuItem {
  value: string;
  label: string;
  children?: { value: string; label: string; img: string }[];
}

const meanList: MenuItem[] = [
  { value: "0", label: "首页" },
  {
    value: "0",
    label: "关于威高",
    children: [
      { value: "0", label: "威高简介", img: '/assets/WeGao/svg/menu_jth.svg' },
      { value: "1", label: "企业文化", img: '/assets/WeGao/svg/menu_jth.svg'  },
      { value: "2", label: "发展历程", img: '/assets/WeGao/svg/menu_jth.svg'  },
    ],
  },
  {
    value: "0",
    label: "产品中心",
    children: [
      { value: "0", label: "通用耗材", img: '/assets/WeGao/svg/menu_jth.svg'  },
      { value: "1", label: "内分泌", img: '/assets/WeGao/svg/menu_jth.svg'  },
      { value: "2", label: "医疗信息化", img: '/assets/WeGao/svg/menu_jth.svg'  },
      { value: "3", label: "骨科", img: '/assets/WeGao/svg/menu_jth.svg'  },
      { value: "4", label: "口腔", img: '/assets/WeGao/svg/menu_jth.svg'  },
      { value: "5", label: "组织修复", img: '/assets/WeGao/svg/menu_jth.svg'  },
      { value: "6", label: "血液净化", img: '/assets/WeGao/svg/menu_jth.svg'  },
      { value: "7", label: "药材包", img: '/assets/WeGao/svg/menu_jth.svg'  },
      { value: "8", label: "外科", img: '/assets/WeGao/svg/menu_jth.svg'  },
      { value: "9", label: "手术机器人", img: '/assets/WeGao/svg/menu_jth.svg'  },
      { value: "10", label: "全血采集", img: '/assets/WeGao/svg/menu_jth.svg'  },
      { value: "11", label: "介入", img: '/assets/WeGao/svg/menu_jth.svg'  },
      { value: "12", label: "体外诊断", img: '/assets/WeGao/svg/menu_jth.svg'  },
      { value: "13", label: "辅助生殖", img: '/assets/WeGao/svg/menu_jth.svg'  },
      { value: "14", label: "医用医疗设备", img: '/assets/WeGao/svg/menu_jth.svg'  },
      { value: "15", label: "康复系列", img: '/assets/WeGao/svg/menu_jth.svg'  },
      { value: "16", label: "内窥镜", img: '/assets/WeGao/svg/menu_jth.svg'  },
      { value: "18", label: "药品", img: '/assets/WeGao/svg/menu_jth.svg'  },
    ],
  },
  {
    value: "0",
    label: "新闻中心",
    children: [{ value: "0", label: "公司新闻", img: '/assets/WeGao/svg/menu_jth.svg'  }],
  },
  { value: "0", label: "ESG" },
  { value: "0", label: "加入威高" },
  { value: "0", label: "集团成员" },
  {
    value: "0",
    label: "服务中心",
    children: [
      { value: "0", label: "服务中心", img: '/assets/WeGao/svg/menu_jth.svg'  },
      { value: "1", label: "供应商门户", img: '/assets/WeGao/svg/menu_jth.svg'  },
    ],
  },
];

export default function TopWeiGao({ TopClassbg = "rgba(0,0,0,0)" }: { TopClassbg?: string }) {
  const [computedBgColor, setComputedBgColor] = useState(TopClassbg);
  const [colorClass, setColorClass] = useState("rgba(255,255,255)");
  const [bottomList, setBottomList] = useState<{ value: string; label: string; img: string }[]>([]);
  const [isOpenBottom, setIsOpenBottom] = useState(false);

  // 鼠标移入主菜单栏
  const handleMouseoverTopClass = () => {
    setComputedBgColor("rgba(255,255,255)");
    setColorClass("rgba(0,0,0)");
  };

  // 鼠标移出主菜单栏
  const handleMouseleaveTopClass = () => {
    setComputedBgColor("rgba(0,0,0,0)");
    setColorClass("rgba(255,255,255)");
    setIsOpenBottom(false);
  };

  // 鼠标移入菜单项
  const handleMouseover = (item: MenuItem, index: number) => {
    if (item.children) {
      setBottomList(item.children);
      setIsOpenBottom(item.children.length !== 0);
    } else {
      setIsOpenBottom(false);
    }
  };

  // 鼠标移出菜单项
  const handleMouseleave = () => {
    setComputedBgColor("rgba(0,0,0,0)");
    setColorClass("rgba(255,255,255)");
    setIsOpenBottom(false);
  };

  // 鼠标移入底部菜单
  const handleMouseoverBottomClass = () => {
    setComputedBgColor("rgba(255,255,255)");
    setColorClass("rgba(0,0,0)");
    setIsOpenBottom(true);
  };

  // 鼠标移出底部菜单
  const handleMouseleaveBottomClass = () => {
    setComputedBgColor("rgba(0,0,0,0)");
    setColorClass("rgba(255,255,255)");
    setIsOpenBottom(false);
  };

  // 鼠标移入底部菜单项
  const handleMouseoverBottomClassText = (item: { value: string; label: string; img: string }, index: number) => {
    setBottomList((prev) =>
      prev.map((it) =>
        it.value === item.value ? { ...it, img: '/assets/WeGao/svg/menu_jth_light.svg' } : { ...it, img: '/assets/WeGao/svg/menu_jth.svg' }
      )
    );
  };

  // 鼠标移出底部菜单项
  const handleMouseleaveBottomClassText = () => {
    setBottomList((prev) => prev.map((it) => ({ ...it, img: '/assets/WeGao/svg/menu_jth.svg' })));
  };

  return (
    <div>
      <div
        className={styles.TopClass}
        style={{ background: computedBgColor }}
        onMouseOver={handleMouseoverTopClass}
        onMouseOut={handleMouseleaveTopClass}
      >
        <div className={styles.TopLogo}>
          <img src="/assets/icons/svg/wg.svg" alt="logo" />
        </div>
        <div className={styles.TopCenter}>
          {meanList.map((item, index) => (
            <div
              className={styles.meanClass}
              style={{ color: colorClass }}
              key={index}
              onMouseOver={() => handleMouseover(item, index)}
              onMouseOut={handleMouseleave}
            >
              <div className={styles.meanTextClass}>{item.label}</div>
              <div className={styles.BorderLeft}></div>
            </div>
          ))}
        </div>
        <div className={styles.TopRight}></div>
      </div>
      {/* 下拉菜单动画 */}
      <div
        className={`${styles.BottonmClass} ${isOpenBottom ? styles.fadeDownEnter : styles.fadeDownLeave}`}
        style={{ background: computedBgColor, display: isOpenBottom ? "flex" : "none" }}
        onMouseOver={handleMouseoverBottomClass}
        onMouseOut={handleMouseleaveBottomClass}
      >
        {bottomList.map((item, index) => (
          <div
            className={styles.BottonmClassCenter}
            key={index}
            onMouseOver={() => handleMouseoverBottomClassText(item, index)}
            onMouseOut={handleMouseleaveBottomClassText}
          >
            <div className={styles.BottonmClassCenterText}>
              <div>{item.label}</div>
              <div>
                <img src={item.img} alt={item.label} />
              </div>
            </div>
            <div className={styles.BorderLeft}></div>
          </div>
        ))}
      </div>
    </div>
  );
}